<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">

			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
				<view class="list_a" v-for="(item,index) in list">
					<image class="a_img" :src="item.image" mode=""></image>
					<view class="list_a_text">
						<view class="white_f_32 a_name">{{item.bankname}}</view>
						<!-- <view class="white_f_28 a_name_b">储蓄卡</view> -->
						<view class="white_f_52 dis_f_sb_c a_num_bo">
							<view>{{item.ago}}</view>
							<view>****</view>
							<view>****</view>
							<view>{{item.after}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bule_back_but buttom"  @click="to_add()">
				添加银行卡
			</view>
			<image class="bo_js_er_img image_k" :src="url+'/image/zcxian.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "我的银行卡",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list:[],
				url:''
			}
		},
		onShow() {
			this.url=this.$.ajax_url3
			this.get_list()
		},
		methods: {
			get_list(){
				this.$.ajax(1,'post','store/store/my_bank',{},(res)=>{
					if(res.code == 200){
						this.list = res.data
					}else{
						this.$.ti_shi(res.msg)
					}
				});
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			to_add(){
				uni.navigateTo({
					url:'/pages-2/wd_er/tj_yhk'
				})
			}
		}
	}
</script>

<style>
	.list_a {
		width: 686rpx;
		height: 280rpx;
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 24rpx;
	}

	.a_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 686rpx;
		height: 280rpx;
	}

	.list_a_text {
		position: absolute;
		top: 0;
		left: 0;
	}

	.a_name {
		margin: 32rpx 0 0 144rpx;
	}

	.a_name_b {
		margin-left: 144rpx;
		font-weight: 400;
		margin-top: 6rpx;
	}

	.a_num_bo {
		width: 622rpx;
		margin-left: 32rpx;
		margin-top: 44rpx;
	}

	.buttom {
		position: fixed;
		bottom: 96rpx;
		left: 32rpx;
	}

	.image_k {
		position: fixed;
		bottom: 24rpx;
		left: 0rpx;
	}
	.scroll-Y {
			height: 74vh;
			/* background-color: red; */
		}
</style>